<template>
  <div id="r_Student">
    <h2>学生列表</h2>
    <table>
      <thead>
        <tr>
          <th>学生编号</th>
          <th>学生姓名</th>
          <th>学生年龄</th>
          <th>学生性别</th>
          <th>学生操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in search_student" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <a href="#" @click.prevent="deleteSudent(item.id)">删除</a
            ><a href="#" id="item.id" @click="updateSudent(item.id)">修改</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import bus from "./bus.js";
export default {
     props: ['student'],
     data(){
        return{
             search_student:[]
        }
     },
     methods:{
         deleteSudent(_id){
             this.$emit(`deleteSudent`,_id);
         },
        updateSudent(_id){
        bus.$emit('_id', _id);
     }
     },
     created(){
         this.search_student=this.student
     },
      mounted(){
            bus.$on("search", (search_type,search_text) => {
                if(search_type=="年龄"){
                   
                   this.search_student=this.student.filter(item=>{
                       return item.age.includes(search_text.trim())
                    })
                  
                }else if(search_type=="性别"){
                   
this.search_student=this.student.filter(item=>{
                       return item.gender.includes(search_text.trim())
                    })
                }else{
                  this.search_student=this.student.filter(item=>{
                       return item.name.includes(search_text.trim())
                    })
                }
                })
      
   }
}
     
     


   

</script>

<style scoped>
#r_Student {
  padding: 30px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}
th,
td {
  border: 1px solid #ddd;
  height: 40px;
  text-align: center;
}
td a {
  margin: 0 10px;
}
</style>